<!-- <template>
    <div class="app-container">
        <component :is="homePageComponent" @nextRouyter="nextRouyter" />
        <HomeThree ref="threeComponent" @loadingFinish="loadingFinish" />
    </div>
</template>

<script setup naem="Index">
import { onMounted, ref, onActivated, onDeactivated , onUnmounted  } from 'vue';
import HomeThree from '@/components/HomeThree';
import { useRouter } from 'vue-router';
const router = useRouter();
const showThree = ref(false) // 控制组件显示/隐藏
const homePageComponent = ref()
const threeComponent = ref(null);
const loadingFinish = async (scene, controls) => {
    if (homePageComponent.value) return;
    const component = await import('@/components/HomePage');
    homePageComponent.value = component.default;
}
const nextRouyter = (path) => {
    router.push({
        path,
        query: { id: 1 }
    })
}
onMounted(() => {
    showThree.value = true;
    console.log(threeComponent);
    
})

// 当组件被激活时触发（从缓存中恢复）
onActivated(() => {
    console.log('组件从缓存中恢复')
})

// 当组件被停用时触发（进入缓存）
onDeactivated(() => {
    console.log('组件被缓存')
})
</script>
<style scoped>
.app-container {
    padding: 0 !important;
    position: relative;
    overflow: hidden !important;
}
</style> -->

<template>
    <iframe class="iframe" :src="iframeSrc" frameborder="0"></iframe>
</template>

<script setup>

import { ref, watch, onMounted } from 'vue'
import { getToken, setToken } from '@/utils/auth';
import { getDeviceParameter } from '@/api/index';
const iframeSrc = ref('')

getDeviceParameter().then(({data}) => { 
    iframeSrc.value = data + `?route=/&adminToken=${getToken()}`
})

</script>
<style>
.iframe{
    width:100%;
    height: 100%;
}
</style>